<template>
  <div class="archive-list-cell">
    <div class="info">
      <div style="width: 100px" class="base-info">
        <tag style="width: 45px;background-color: #84C1FF" effect="dark" type="primary" v-if="problem.difficulty === 0" class="time-tag">简单</tag>
        <tag style="width: 45px;background-color: #EFD48F" effect="dark" type="warning" v-if="problem.difficulty === 1" class="time-tag">中等</tag>
        <tag style="width: 45px;background-color: #F58585" effect="dark" type="danger" v-if="problem.difficulty === 2" class="time-tag">困难</tag>
      </div>
      <div style="width: 350px" class="base-info">
        <router-link id="problem" :to="{path: '/problem', query: {id: problem.id}}">
          <span id="problemName">
            {{problem.name}}
          </span>
        </router-link>
        <div class="line"></div>
      </div>
      <div style="width: 100px" class="base-info">
        <router-link id="source" :to="{path: '/', query: {name: problem.source}}">
          <span id="sourceName">
            {{problem.source}}
          </span>
        </router-link>
        <div class="line"></div>
      </div>
      <div style="width: 100px; text-align: center" class="base-info">
        <i v-if="problem.flag === true" class="el-icon-trophy" style="font-size: 24px; color: gold"></i>
        <i v-if="problem.flag === false" class="el-icon-view" style="font-size: 20px; color: darkgray"></i>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mixin } from "@/utils";
import { Tag, Link, Icon } from "element-ui";

export default {
  components: {
    Tag, Link, Icon
  },
  props: {
    problem: {
      Type: Object,
    },
  },
  mixins: [mixin],
};
</script>

<style lang="stylus" scoped type="text/stylus" rel="stylesheet/stylus">
@import '../../../assets/stylus/theme.styl';

#problemName {
  color: #473e3e;
}

#problemName:hover {
  color: #409EFF;
}

.line {
  height: 1px;
  background-color: $color-gradually-gray-91;
  margin: 10px 20px;
}

.archive-list-cell {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    min-height: 25px;
    top: 0;
    bottom: 0;
    left: 88px;
    width: 4px;
    background: $default-link-hover-color;
  }

  .info {
    display: flex;
    font-size: 17px;
    line-height: 25px;
    margin-left: 125px;
    cursor: pointer;
    opacity: 100;

    @media only screen and (max-width: 720px) {
      font-size: 13px;
    }

    .time-tag {
      flex-shrink: 0;
    }

    .time-tag2 {
      flex-shrink: 0;
      font-size: 18px;
      font-weight: bold;
    }

    .base-info {
      a.title {
        margin-left: 25px;
        color: $default-title-color;
        cursor: pointer;

        &:hover {
          color: $default-title-hover-color;
        }
      }

      a.see-desc {
        color: $default-desc-color;
        font-size: 13px;
        margin-left: 5px;
        font-weight: 100;
        cursor: pointer;

        > i {
          transition: All 0.4s ease-in-out;
          transform: rotateX(180deg);
        }

        &:hover, &.show {
          color: $default-desc-hover-color;
        }

        &.show {
          > i {
            transform: rotateX(0deg);
          }
        }
      }

      .desc {
        font-size: 14px;
        font-weight: 300;
        margin-left: 5px;
        color: $default-desc-color;
        overflow: hidden;
        max-height: 0;
        transition: All 0.4s ease-in-out;

        &.show {
          max-height: 250px;
        }
      }
    }
  }
}
</style>
